<template>
  <div class="app-container" v-loading="pageLoading">
    <el-button type="primary" class="fr" @click="createItem" v-permission="'machine.add'">创建</el-button>
    <div class="filter-container">
      <el-select class="filter-item" style="width: 160px" v-model="query.queryString.machine_status" placeholder="选择状态"
        filterable clearable @change="research">
        <el-option v-for="(item, index) in statusOptions" :key="index" :value="item.value" :label="item.label">
        </el-option>
      </el-select>
      <el-select class="filter-item" style="width: 160px;" v-model="query.queryString.typeid" placeholder="选择类型"
        @change="research" filterable clearable>
        <el-option v-for="(item,index) in machineTypeOptions" :key="index" :value="item.value" :label="item.label">
        </el-option>
      </el-select>
      <el-input style="width: 300px" placeholder="输入查询条件按回车" clearable prefix-icon="el-icon-search" class="filter-item"
        @keyup.enter.native="research" @clear="research" v-model="query.queryString.str"></el-input>
      <el-button class="filter-item" type="success" plain @click="research">查询</el-button>
      <el-button class="filter-item" type="info" plain @click="exportData" :loading="exportLoading">导出 </el-button>
    </div>
    <z-table :list="list" :tableProps="tableProps" :columns="columns" @editItem="editItem" @deleteItem="deleteItem">
    </z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getList"></z-pagination>
    <z-form-dialog :name="name" :data="data" :formProps="formProps" :fields="fields" @submit="submit"
      :submitLoading="submitLoading" :visible.sync="editFormVisible"></z-form-dialog>
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
export default {
  mixins: [commonMixin],
  name: 'machine',
  data: function () {
    return {
      api: this.$api.machine,
      apiEdit: this.$api.machine + 'add',
      name: '设备',
      columns: [
        { title: '设备类型', key: 'machine_type_name', width: 140 },
        { title: '设备编码', key: 'machine_code', width: 140 },
        { title: '设备名称', key: 'machine_name', width: 140 },
        { title: '设备描述', key: 'machine_description' },
        { title: '设备状态', key: 'machine_status_text', width: 140 },
        { title: '修改人', key: 'modify_user', width: 100 },
        { title: '最后修改', key: 'modify_time', width: 140 },
      ],
      fields: [
        {
          title: '设备类型',
          key: 'machine_type_id',
          required: true,
          name: 'select',
          options: [],
          props: {
            filterable: true,
            // remote: true,
            // remoteMethod: this.getMachineOptions,
          },
        },
        { title: '设备编码', key: 'machine_code', props: {}, required: true },
        { title: '设备名称', key: 'machine_name', required: true },
        { title: '设备描述', key: 'machine_description' },
        { title: '设备状态', key: 'machine_status', name: 'select', options: [], props: {}, required: true },
        { title: '备注', key: 'remarks' },
      ],
      query: {
        queryString: {},
        page: 1,
        size: 10,
      },
      initData: {
        machine_status: '0',
        typeid: null,
      },
      statusOptions: [
        { value: '0', label: '正常' },
        // { value: '1', label: '使用' },
        { value: '2', label: '维修' },
        { value: '3', label: '保养' },
        { value: '4', label: '损坏' },
        { value: '5', label: '报废' },
      ],
      machineTypeOptions: [],
    }
  },
  methods: {
    formatList(list) {
      //依据实际需求处理
      let tmp = _.cloneDeep(list)
      let tmpObj = _.keyBy(this.statusOptions, 'value')
      return tmp.map((i) => {
        i.machine_status_text = tmpObj[i.machine_status] ? tmpObj[i.machine_status].label : ''
        return i
      })
    },
    // 筛选项获取类型
    getMachineTypeOptions(v) {
      this.machineTypeOptions = []
      this.$request(this.$api.machineType + 'getList?size=999' + '&queryString=' + v).then((r) => {
        this.machineTypeOptions = this.formatSelectOption(r.list)
        this.setFieldOptions('machine_type_id', this.machineTypeOptions, 'value', 'label')
      })
    },

    // 获取类型
    getMachineOptions(v) {
      this.setFieldOptions('machine_type_id', [], 'id', ['machine_type_code', 'machine_type_name'])
      this.$request(this.$api.machineType + 'getList?size=200' + '&queryString=' + v).then((r) => {
        this.setFieldOptions('machine_type_id', r.list, 'id', ['machine_type_code', 'machine_type_name'])
      })
    },
    formatSelectOption(data) {
      let tmp = []
      if (data && data.length > 0) {
        tmp = this.arrayOptions(data, 'id', ['machine_type_code', 'machine_type_name'])
      }
      return tmp
    },
  },
  created: function () {
    this.getList()
    this.setFieldOptions('machine_status', this.statusOptions, 'value', 'label')
    this.getMachineTypeOptions('')
  },
  watch: {
    // data: function(val) {
    //   this.getFieldConfig('machine_code').props.disabled = val.id ? true : false
    // },
  },
}
</script>
<style scoped>
</style>
